import { Component } from "react";
import PropTypes from 'prop-types'
import EventEmitter from 'events'
var bus = new EventEmitter()

let num = 1;
let numAdd = () => {
    num++;
    console.log(num);
}

export default class PropDemo extends Component {

    render() {
        return (
            <div>
                这是父组件
                <hr />
                <Child num={num}
                    numAdd={numAdd}
                />
                <hr />
                <Brother />
            </div>
        )
    }
}

class Child extends Component {
    // numAdd() {
    //     num++;
    //     console.log(num);
    // }
    changeBro = (v) => {

        bus.emit('changeBro', v.target.value)
    }
    render() {
        const { num, numAdd } = this.props

        return (
            <div>
                <h4>这是子组件</h4>
                <button onClick={numAdd}>{num}</button>
                <input type="text" onChange={this.changeBro} />
            </div>
        )
    }
}
Child.propTypes = {
    num: PropTypes.number
}

class Brother extends Component {
    constructor() {
        super()
        this.state = {
            inpVal: ''
        }
    }
    componentDidMount() {
        bus.on('changeBro', (inpVal) => {
            this.setState({
                inpVal
            })
        })
    }

    render() {
        const { inpVal } = this.state
        return (
            <div>
                <h4>这是兄弟组件</h4>
                <p>{inpVal}</p>
            </div>
        )
    }
}